import React, { useEffect, useState } from "react";
import { Button, Col, Divider, Input, Row, Spin, Table, Tag, Tree } from "antd";
import { mergeTreeDataByCity, type, sonType } from "../../../../utils/leafObj";

const { Search } = Input;
const { DirectoryTree } = Tree;

function PointCity() {
  const [cities, setCities] = useState(["北京", "武汉", "上海"]);
  const [treeData, setTreeData] = useState([]);
  // const [dataSource, setDataSource] = useState([])
  const [tag1, setTag1] = useState("");
  const [tag2, setTag2] = useState("");
  const [tag3, setTag3] = useState("");

  const onSelect = (keys, info) => {
    console.log("Trigger Select", keys, info);
    let leafArray = keys[0].split("-");
    let tempType = type[parseInt(leafArray[1])];
    setTag1(cities[parseInt(leafArray[0])]);

    isNaN(parseInt(leafArray[1])) ? setTag2("") : setTag2(tempType);

    isNaN(parseInt(leafArray[2]))
      ? setTag3("")
      : setTag3("类别" + sonType[tempType][parseInt(leafArray[2])]);
  };

  const onSearch = () => {
    console.log(tag1, tag2, tag3);
  };

  useEffect(() => {
    setCities(["北京", "武汉", "上海"]);
    setTreeData(mergeTreeDataByCity(cities));
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <div className="pointCity">
      <label style={{ fontSize: 16 }}>已选中搜索条件：</label>
      <Tag
        color="red"
        closable
        visible={tag1 ? true : false}
        style={{ fontSize: 16, height: "24px" }}
        onClose={() => {
          setTag1("");
        }}
      >
        {tag1}
      </Tag>
      <Tag
        color="blue"
        closable
        visible={tag2 ? true : false}
        style={{ fontSize: 16, height: "24px" }}
        onClose={() => {
          setTag2("");
        }}
      >
        {tag2}
      </Tag>
      <Tag
        key="3"
        color="orange"
        closable
        visible={tag3 ? true : false}
        style={{ fontSize: 16, height: "24px", marginRight: "32px" }}
        onClose={(key) => {
          setTag3("");
        }}
      >
        {tag3}
      </Tag>
      <Button type="primary" onClick={onSearch}>
        确认搜索
      </Button>
      <Divider />
      <Row gutter={{ xs: 6, sm: 16, md: 24 }}>
        <Col span={7} style={{ overflow: "auto", maxHeight: "calc(68vh)" }}>
          <div className="searchBox">
            <Search
              placeholder="请输入搜索城市"
              onSearch={onSearch}
              enterButton
              size="small"
              style={{
                width: "80%",
                position: "relative",
                left: "2%",
                marginBottom: "10px",
              }}
            />
          </div>
          <DirectoryTree
            multiple
            defaultExpandAll
            onSelect={onSelect}
            treeData={treeData}
          />
        </Col>
        <Col span={1}>
          <div
            style={{
              width: "5%",
              height: "calc(65vh)",
              backgroundColor: "rgb(240,242,245)",
            }}
          ></div>
        </Col>
        <Col span={15}>
          <Spin spinning={false}>
            <Table />
          </Spin>
        </Col>
      </Row>
    </div>
  );
}

export default PointCity;
